<template>
  <div>
    <div id="pietab2" style="width: 380px;height: 300px;margin: 0 auto"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chartData: {
        series: [
          {
            data: [10, 20, 30, 40, 50],
          },
        ],
      },
      option: {
        grid: {
          top: 40,
          bottom: 40,
          left: 40,
          right: 40
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (data) {
            console.log(data)
            let html = ``
            html = `
          <div>${data[0].marker} ${data[0].name}: ${data[0].value}%</div>
          `
            return html
          }
        },
        calculable: true,
        legend: {
          show: false
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              // rotate: 45 // 旋转角度
            },
            data: [
              '篮球',
              '足球',
              '排球',
              '游泳',
              '跑步',
              '乒乓球',
              '轮滑',
            ]
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            axisLabel: {
              formatter: '{value}%'
            }
          },

        ],
        series: [
          {
            name: '百分比',
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: "#4B87FFFF"},
                {offset: 1, color: "#82BCFFFF"}
              ])
            },
            data: [
              10, 20, 30, 40, 50, 60, 70
            ]
          },

        ]
      }
    };
  },
  mounted() {
    let chartDom2 = document.getElementById('pietab2');
    let myChart2 = echarts.init(chartDom2);
    this.option && myChart2.setOption(this.option);
  }
};
</script>
